<div class="visualization-editor">
  <div class="modal-header">
    <button type="button" class="close" aria-label="Close" ng-click="$ctrl.closeDialog()"><span aria-hidden="true">&times;</span>
    </button>
    <h4 class="modal-title">Visualization Editor</h4>
  </div>
  <div class="modal-body">
    <div class="row">
      <div class="col-md-5 p-r-10 p-l-0">
        <div>
          <form name="$ctrl.visForm">
            <div class="form-group">
              <label class="control-label">Visualization Type</label>

              <select required ng-model="$ctrl.visualization.type"
                ng-disabled="!$ctrl.canChangeType"
                ng-options="type.type as type.name for type in $ctrl.visTypes" class="form-control"
                ng-change="$ctrl.typeChanged('{{$ctrl.visualization.type}}')"></select>
            </div>

            <div class="form-group">
              <label class="control-label">Visualization Name</label>
              <input name="name" type="text" class="form-control" ng-model="$ctrl.visualization.name"
                     placeholder="{{$ctrl.visualization.type | capitalize}}">
            </div>

            <visualization-options-editor visualization="$ctrl.visualization"
                                          query-result="$ctrl.queryResult"
                                          query="$ctrl.query">
            </visualization-options-editor>
          </form>
        </div>
      </div>
      <div class="col-md-7 p-0 visualization-editor__right">
        <visualization-renderer visualization="$ctrl.visualization" query-result="$ctrl.queryResult"></visualization-renderer>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" ng-click="$ctrl.closeDialog()">Cancel</button>
    <button type="button" class="btn btn-primary" ng-click="$ctrl.submit()">Save</button>
  </div>
</div>
